<template>
  <!-- 主容器 -->
  <div class="approval-container">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="150px"
      class="demo-ruleForm"
    >
      <el-form-item label="申请方式" prop="sqfss">
        <template>
          <div  v-for="(item, index) in options" :key="index">
            {{item == 0 ? "数据库" : item == 1 ? "API服务" : "文件" }}
          </div>
        </template>
      </el-form-item>
      <el-form-item label="审批人" prop="spr">
        <el-select v-model="ruleForm.spr" placeholder="请选择">
          <el-option
            v-for="item in optionslist"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请描述" prop="sqms">
        <el-input
          style="width: 500px"
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 3 }"
          placeholder="请输入内容"
          v-model="ruleForm.sqms"
          resize="none"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="申请人手机号" prop="sqrPhone">
        <el-input
          style="width: 500px"
          placeholder="请输入内容"
          v-model="ruleForm.sqrPhone"
        >
        </el-input>
      </el-form-item>
      <div v-if="ruleForm.sqfss == 0">
        <el-form-item label="接收库ip" prop="jskIp">
          <el-input
            style="width: 500px"
            placeholder="请输入内容"
            v-model="ruleForm.jskIp"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="接收库端口" prop="jskPort">
          <el-input
            style="width: 500px"
            placeholder="请输入内容"
            v-model="ruleForm.jskPort"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="接收库用户名" prop="jskUsername">
          <el-input
            style="width: 500px"
            placeholder="请输入内容"
            v-model="ruleForm.jskUsername"
          >
          </el-input>
        </el-form-item>
      </div>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确定</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getApiBmid, getSpr, getAddapp } from "@/utils/httpUtils";

export default {
  props: ["bmId", "approvalDialog"],
  data() {
    const validatePhone = (rule, value, callback) => {
      const phoneRegex = /^1[3-9]\d{9}$/; // 简单的中国手机号正则表达式
      if (!value) {
        callback(new Error("请输入申请人手机号"));
      } else if (!phoneRegex.test(value)) {
        callback(new Error("手机号格式不正确"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        sqfss: [], // 申请方式
        spr: "", // 申请人
        sqms: "", // 申请描述
        resourceId: this.bmId,
        sqrPhone: "",
        jskIp: "",
        jskPort: "",
        jskUsername: "",
      },
      rules: {
        sqfss: [
          { required: true, message: "请选择申请方式", trigger: "change" },
        ],
        spr: [{ required: true, message: "请选择审批人", trigger: "change" }],
        sqms: [{ required: true, message: "请输入申请描述", trigger: "blur" }],
        sqrPhone: [
          { required: true, message: "请输入申请人手机号", trigger: "blur" },
          { validator: validatePhone, trigger: "blur" }
        ],
        jskIp: [{ required: true, message: "请输入接收库ip", trigger: "blur" }],
        jskPort: [
          { required: true, message: "请输入接收库端口", trigger: "blur" },
        ],
        jskUsername: [
          { required: true, message: "请输入接收库用户名", trigger: "blur" },
        ],
      },
      options: [], // 用于存储后台返回的数组
      optionslist: [], // 用于存储申请人选项列表
    };
  },
  mounted() {
    // this.getbmFn();
    // this.getsprFn();
  },
  methods: {
    getbmFn() {
      getApiBmid(this.bmId).then((res) => {
        console.log(res, "3");
        this.options = res;
        this.ruleForm.sqfss = this.options
      });
    },
    getsprFn() {
      getSpr().then((res) => {
        console.log(res, "审批人");
        this.optionslist = res.map((role) => ({ label: role.nickName, value: role.nickName }));
        console.log(this.optionslist, "审批人数组");
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("Form Data:", this.ruleForm); // 获取表单内容
          getAddapp(this.ruleForm).then((res) => {
            console.log(res, "新增申请");
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.approvalDialog.show = false;
              this.$emit("refresh");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
</style>

